<template>
	<view class="container">
		<view v-if="offlineCourse" class="top">
			<u-image class="cover" width="322" height="216" :src="offlineCourse.cover" border-radius="20"></u-image>
			<view class="info">
				<view class="title">{{offlineCourse.title}}</view>
				<view class="info-item">
					<u-icon name="clock"></u-icon>
					<view>{{$u.timeFormat(offlineCourse.beginAt, 'yyyy年mm月dd日 hh:MM')}}</view>
				</view>
				<view class="info-item">
					<u-icon name="account"></u-icon>
					<view>{{offlineCourse.visitorCount}}人已报名</view>
				</view>
				<view class="staff">
					<u-image :src="offlineCourse.staffHeadImg" width="40" height="40" border-radius="50%"></u-image>
					<view class="staffName">{{offlineCourse.staffName}}</view>
				</view>
			</view>
		</view>
		
		<view class="check-view">
			<u-table>
				<u-tr>
					<u-th>序号</u-th>
					<u-th>姓名</u-th>
					<u-th>签到</u-th>
				</u-tr>
				<u-tr v-for="(item, index) in list" style="height: 60rpx;">
					<u-td>{{index + 1}}</u-td>
					<u-td>{{item.staffName}}</u-td>
					<u-td>
						<view style="display: flex;justify-content: center;align-items: center;">
							<u-checkbox
								style="margin-left: 24rpx;"
								@change="change"
								v-model="item.checked"
								:name="item.staffId">
							</u-checkbox>
						</view>
					</u-td>
				</u-tr>
			</u-table>
				
<!-- 			<u-checkbox-group>
				<u-checkbox
					@change="change"
					style="margin-top: 20rpx;"
					shape="circle"
					v-model="item.checked"
					v-for="(item, index) in list" :key="index"
					:name="item.staffId">
					{{item.staffName}}
				</u-checkbox>
			</u-checkbox-group> -->
		</view>		
	</view>
</template>

<script>
	import XButton from '@/components/x-button.vue'
	import { getOtCourse, checkRecord, getBookingRecord } from '@/api/study.js'
	export default {
		components: {
			XButton
		},
		data() {
			return {
				offlineCourse: null,
				list: [],
			}
		},
		onLoad(options) {
			this.offlineCourseId = options.offlineCourseId;
			this.getCourse();
			this.getBookingList();
		},
		methods: {

			change(res) {
				console.log(res);
				this.checkRecord(res.name, res.value);
			},
			
			getCourse() {
				getOtCourse(this.offlineCourseId).then(res => {
					console.log(res);
					this.offlineCourse = res.data;
				})
			},
			
			getBookingList() {
				getBookingRecord(this.offlineCourseId).then(res => {
					console.log(res);
					this.list = res.data.content;
				})
			},
			
			checkRecord(staffId, value) {
				let params = {
					offlineCourseId: this.offlineCourseId,
					staffId: staffId,
					checked: value
				}
				console.log(params);
				checkRecord(params).then(res => {
					console.log(res);
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: $app-page-bg-color;
	}
	
	.container{
		padding: 0 $app-page-padding;
		
		.top{
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			margin-top: 20rpx;
			.cover{
				width: 50%;
			}
			
			.info{
				width: 50%;
				display: flex;
				flex-direction: column;
				margin-left: 20rpx;

				.title{
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
					line-height: 30rpx;
					margin-bottom: 20rpx;
				}
				
				.info-item{
					display: flex;
					flex-direction: row;
					
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 30rpx;
				}
				
				.staff{
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-top: 20rpx;
					
					.staffName{
						margin-left: 10rpx;
						font-size: 18rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #6E645A;
						line-height: 65rpx;
					}
				}
			}
		}
		
		.check-view{
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 20rpx;
			margin-top: 30rpx;
		}
	}
</style>
